<template>
    <van-skeleton title :row="3" />
    <div>
        <h2>登录</h2>
        <p><van-image round style="width: 70px;height: 70px;" width="10rem" height="10rem"
                src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
            <span>产品slogo</span>
        </p>
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="username" label="用户名" placeholder="用户名"
                    :rules="[{ pattern, message: '请填写用户名' }]" />
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
            <span @click="zc">立即注册</span>
        </van-form>

    </div>
</template>

<script setup>
import { ref } from 'vue';
import { showSuccessToast, showFailToast } from 'vant';
import router from '@/router';
import { loginApi } from '@/api/api';
let loginApiData = ref([])
const username = ref('');
const password = ref('');
const pattern = /^1[3-9]\d{9}$/
const onSubmit = () => {
    if (password.value.length < 9) {
        loginApi(username.value, password.value).then(res => {
            if (res.data.code == 0) {
                loginApiData.value = res.data.message
                showSuccessToast('登录成功');
                router.push('/home/card')
                localStorage.setItem('token',res.data.data.token)
                localStorage.setItem('username',res.data.data.username)
            } else {
                showFailToast('登录失败');
            }
        })
    } else {
        showFailToast('密码不能超过8位数');
    }
};
const zc = () => {
    router.push('/register')
    console.log('注册页面');
    
}
</script>

<style scoped>
h2 {
    text-align: center;
}

p {
    height: 70px;
    text-align: center;
}
</style>